<template>
  <div class="home-container">
    <!-- <van-nav-bar
      class="app-nav-bar"
      title="考勤打卡系统"
    /> -->
      <!-- <van-button
        slot="title"
        class="search-btn"
        icon="search"
        type="info"
        round
        size="small"
      >搜索</van-button> -->
    <!-- </van-nav-bar> -->
    <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
      <van-swipe-item>
        <img src="https://img2.baidu.com/it/u=2800969767,1305658655&fm=26&fmt=auto&gp=0.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img src="https://img2.baidu.com/it/u=1037340957,2788849727&fm=26&fmt=auto&gp=0.jpg" alt="">
      </van-swipe-item>
    </van-swipe>
    <van-grid :gutter="10" style="margin-top: 7px">
      <van-grid-item icon="location-o" text="打卡" to="/signIn" />
      <van-grid-item icon="envelop-o" text="请假" to="/leave" />
      <van-grid-item v-if="role === 'admin'" icon="todo-list-o" text="健康管理" to="/healthy" />
      <van-grid-item icon="clock-o" text="学时" to="/classHours" />
      <van-grid-item icon="scan" text="扫码" to="/QR" />
    </van-grid>
  </div>
</template>

<script>
export default {
  name: 'HomeIndex',
  components: {},
  props: {},
  data () {
    return {
      role: null
    }
  },
  computed: {},
  watch: {},
  created () {
    this.role = this.$store.state.user.role
  },
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="scss">
// .my-swipe .van-swipe-item {
//   color: #fff;
//   font-size: 20px;
//   line-height: 150px;
//   text-align: center;
//   background-color: #39a9ed;
// }
img {
  width: 100%;
  height: 200px;
}
</style>
